<template>
  <div>
    <div class="a">
      <span>账号：</span>
      <el-input type="text" v-model="userInfos.username" />
    </div>
    <div class="a">
      <span>手机号：</span>
      <el-input type="text" v-model="userInfos.name" />
    </div>
    <div class="head a">
      <span> 头像：</span>
      <el-upload
        class="avatar-uploader"
        action="http://114.55.37.219:9090/files/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="userInfos.avatarUrl"
          :src="userInfos.avatarUrl"
          class="avatar"
        />
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
  </div>
  <el-button type="primary" plain @click="sub">提交</el-button>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { userInfo } from "@/store/user.js";
let store = userInfo();
let userInfos = ref({});
userInfos.value = store.info;

const handleAvatarSuccess = (value) => {
  userInfos.value.avatarUrl = value;
};
const sub = () => {};
</script>
<style scoped lang="less">
.avatar-uploader {
  height: 100%;
  line-height: 100%;
  img {
    width: 80px;
    margin-left: 20px;
  }
  .avatar-uploader-icon {
    font-size: 40px;
    margin-left: 30px;
  }
}

.head {
  display: flex;
  height: 60px;
  align-items: center;
}

.a {
  margin-top: 20px;
  display: flex;
  align-items: center;
  span {
    width: 80px;
  }
}
</style>